<template>
  <el-dialog
    title="设置"
    :close-on-click-modal="false"
    :visible.sync="visible"
    :destroy-on-close="true"
    :append-to-body="true"
    width="70%"
  >

    <div :key="luckyKey +'sidebar'" class="row">
      <div class="x-list-content" :style="{width:xList.length * 80+'px'}">
        <div v-for="(subItem,subIndex) in xList" :key="subIndex + 'columntitle'" class="column-item">{{ subItem }}</div>
      </div>
      <template v-for="(item,index) in dataSource">
        <div :key="index+'row'" :ref="index+ 'column'" class="column" :style="{width:xList.length * 80+'px'}">
          <li v-for="(subItem,subIndex) in item" :key="subIndex + 'column'" :data-index="index+'/'+subIndex" :class="selectSheet.indexOf(index+'/'+subIndex)>-1 ?'column-item column-select-item':'column-item'">{{ }}</li>
        </div>
      </template>

      <div class="ylist">
        <div v-for="(item,index) in yList" :key="index+'ylist'" class="ylist-item">
          {{ item }}
        </div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>

// import Luckysheet from '@/components/Luckysheet/index.vue'

export default {
  name: 'LuckysheetDialog',
  components: {
    // Luckysheet
  },
  props: {
    gdfwList: {
      default: () => {
        return []
      },
      type: Array
    }
  },
  data() {
    return {
      visible: false,
      sheetParams: {
        excelHeader: ['姓名', '年龄', '性别'],
        excelData: {
          姓名: ['张三', '赵兰', '李四'],
          年龄: ['18', '17', '20'],
          性别: ['男', '女', '男']
        }
      },
      dataSource: [
      ],
      luckyKey: 0,
      // 默认选中
      selectSheet: [

      ],
      // 度数 y   纵轴是度数。横轴是散光
      yList: [
        '-16.00', '-15.75', '-15.50', '-15.25', '-15.00', '-14.75', '-14.50', '-14.25', '-14.00', '-13.75', '-13.50', '-13.25', '-13.00', '-12.75', '-12.50', '-12.25', '-12.00', '-11.75', '-11.50', '-11.25', '-11.00', '-10.75', '-10.50', '-10.25', '-10.00', '-9.75', '-9.50', '-9.25', '-9.00', '-8.75', '-8.50', '-8.25', '-8.00', '-7.75', '-7.50', '-7.25', '-7.00', '-6.75', '-6.50', '-6.25', '-6.00', '-5.75', '-5.50', '-5.25', '-5.00', '-4.75', '-4.50', '-4.25', '-4.00', '-3.75', '-3.50', '-3.25', '-3.00', '-2.75', '-2.50', '-2.25', '-2.00', '-1.75', '-1.50', '-1.25', '-1.00', '-0.75', '-0.50', '-0.25', '0.00', '0.25', '0.50', '0.75', '1.00', '1.25', '1.50', '1.75', '2.00', '2.25', '2.50', '2.75', '3.00', '3.25', '3.50', '3.75', '4.00', '4.25', '4.50', '4.75', '5.00', '5.25', '5.50', '5.75', '6.00', '6.25', '6.50', '6.75', '7.00', '7.25', '7.50', '7.75', '8.00', '8.25', '8.50', '8.75', '9.00', '9.25', '9.50', '9.75', '10.00', '10.25', '10.50', '10.75', '11.00', '11.25', '11.50', '11.75', '12.00', '12.25', '12.50', '12.75', '13.00', '13.25', '13.50', '13.75', '14.00', '14.25', '14.50', '14.75', '15.00', '15.25', '15.50', '15.75', '16.00'
      ],
      // 闪光 x
      xList: [
        '-6.00', '-5.75', '-5.50', '-5.25', '-5.00', '-4.75', '-4.50', '-4.25', '-4.00', '-3.75', '-3.50', '-3.25', '-3.00', '-2.75', '-2.50', '-2.25', '-2.00', '-1.75', '-1.50', '-1.25', '-1.00', '-0.75', '-0.50', '-0.25', '0.00', '0.25', '0.50', '0.75', '1.00', '1.25', '1.50', '1.75', '2.00', '2.25', '2.50', '2.75', '3.00', '3.25', '3.50', '3.75', '4.00', '4.25', '4.50', '4.75', '5.00', '5.25', '5.50', '5.75', '6.00'
      ],
      valueList: []
    }
  },
  mounted() {
    const row = this.xList.length
    const column = this.yList.length
    const dataSource = []
    for (let index = 0; index < column; index++) {
      const list = []
      for (let y = 0; y < row; y++) {
        list.push(this.xList[y])
      }
      dataSource.push(
        list
      )
    }
    this.dataSource = dataSource
    this.selectSheet = this.gdfwList
    this.valueList = this.gdfwList
  },
  methods: {
    dataFormSubmit() {
      this.visible = false
      this.$emit('gdfwBack', this.valueList)
    },
    openDialog(gdfws) {
      console.log('openDialog----xx-->', gdfws)
      this.selectSheet = gdfws
      this.valueList = gdfws
      this.visible = true
      this.$nextTick(() => {
        let list = []
        let isSelect = false

        let targetList = []
        const ul = document.querySelector('.row')
        ul.addEventListener('mousedown', (event) => {
          // this.luckyKey = this.luckyKey + 1
          this.selectSheet = []
          if (list.length > 0) {
            targetList.forEach((item) => {
              item.style.background = '#d2d2d2'
            })
            targetList = []
            list = []
          }
          isSelect = true
          const target = event.target

          // 标签为li标签 而且 父元素为ul
          if (target.tagName === 'LI' && isSelect) {
            target.style.background = '#fff'
            const value = event.target.attributes['data-index'].value
            list.push(value)
            targetList.push(target)
          }
        })

        ul.addEventListener('mouseover', function(event) {
          const target = event.target
          // 标签为li标签 而且 父元素为ul
          if (target.tagName === 'LI' && isSelect) {
            target.style.background = '#fff'
            const value = event.target.attributes['data-index'].value
            list.push(value)
            targetList.push(target)
          }
        })

        ul.addEventListener('mouseup', (event) => {
          const target = event.target

          // 标签为li标签 而且 父元素为ul
          if (target.tagName === 'LI' && isSelect) {
            target.style.background = '#fff'
            const value = event.target.attributes['data-index'].value
            list.push(value)
            targetList.push(target)

            this.valueList = Array.from(new Set(list))
          }
          isSelect = false
        })
      })
    }
  }
}
</script>
<style scoped  lang="scss">
.row {
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding-left: 80px;
  position: relative;
}
.column {
  // display:flex;
  // flex-direction: row;
  overflow: auto;
  .column-item {
      width: 80px;
      float: left;
      height: 28px;
      border: 1px solid #d9d9d9;
      background-color: #d2d2d2;
      list-style:none
  }
  .column-select-item {
       background-color: #fff;
  }

}
.x-list-content {
  overflow: scroll;
}
  .column-item {
    font-size: 12px;
     width: 80px;
     text-align: center;
     float: left;
  }
  .ylist-item {
     font-size: 12px;
     width: 80px;
      height: 28px;
     text-align: center;
  }
  .ylist {
    position: absolute;
    top: 28px;
    left: 0px;
  }
</style>
